<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/base}">
<head>
    <title>我的寄件 - 快递管理系统</title>
</head>
<body>
    <div layout:fragment="content">
        <h2 class="mb-4">我的寄件</h2>

        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">我寄出的包裹</h5>
            </div>
            <div class="card-body">
                <div class="alert alert-info mb-3">
                    <i class="fas fa-info-circle me-2"></i>已揽收的包裹不可修改，体积和价格不可修改，由管理员计算
                </div>
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>订单号</th>
                                <th>寄件人</th>
                                <th>寄件地址</th>
                                <th>收件人</th>
                                <th>收件地址</th>
                                <th>包裹类型</th>
                                <th>重量(kg)</th>
                                <th>状态</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr th:each="order : ${orders}">
                                <td th:text="${order.orderNumber}"></td>
                                <td th:text="${order.senderName}"></td>
                                <td th:text="${order.senderAddress}"></td>
                                <td th:text="${order.receiverName}"></td>
                                <td th:text="${order.receiverAddress}"></td>
                                <td th:text="${order.packageType}"></td>
                                <td th:text="${order.weight}"></td>
                                <td>
                                    <span class="badge"
                                          th:classappend="${order.status == '待处理' ? 'bg-secondary' : 
                                          (order.status == '已揽收' ? 'bg-info' : 
                                          (order.status == '运输中' ? 'bg-primary' : 
                                          (order.status == '未签收' ? 'bg-warning' : 
                                          (order.status == '已签收' ? 'bg-success' : 'bg-danger'))))}"
                                          th:text="${displayStatusMap.get(order.status) != null ? displayStatusMap.get(order.status) : order.status}">
                                    </span>
                                </td>
                                <td th:text="${order.createdAt != null ? #temporals.format(order.createdAt, 'yyyy-MM-dd HH:mm:ss') : 'N/A'}"></td>
                                <td>
                                    <button class="btn btn-sm btn-primary view-details-btn" th:data-order-id="${order.id}">查看</button>
                                    <button class="btn btn-sm btn-warning edit-order-btn" th:data-order-id="${order.id}" th:if="${order.status == 'PENDING' or order.status == 'SHIPPED' or order.status == '待处理' or order.status == '已发货'}">修改</button>
                                    <button class="btn btn-sm btn-danger cancel-order-btn" th:data-order-id="${order.id}" th:if="${order.status == 'PENDING' or order.status == '待处理'}">取消</button>
                                    <script th:if="${order.status == 'SHIPPED'}">
                                        console.log('订单ID: [[${order.id}]] 状态为 SHIPPED，应显示修改按钮');
                                    </script>
                                </td>
                            </tr>
                            <tr th:if="${#lists.isEmpty(orders)}">
                                <td colspan="10">暂无寄出的包裹。</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- 模态框（订单详情） -->
    <div class="modal fade" id="orderDetailsModal" tabindex="-1">
        <script>
            console.log('模态框 HTML 代码已渲染');
        </script>
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">订单详情</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p><strong>订单号:</strong> <span id="modalOrderNumber"></span></p>
                    <p><strong>寄件人:</strong> <span id="modalSenderName"></span> (<span id="modalSenderPhone"></span>)</p>
                    <p><strong>寄件地址:</strong> <span id="modalSenderAddress"></span></p>
                    <p><strong>收件人:</strong> <span id="modalReceiverName"></span> (<span id="modalReceiverPhone"></span>)</p>
                    <p><strong>收件地址:</strong> <span id="modalReceiverAddress"></span></p>
                    <p><strong>包裹类型:</strong> <span id="modalPackageType"></span></p>
                    <p><strong>重量:</strong> <span id="modalWeight"></span> kg</p>
                    <p><strong>体积:</strong> <span id="modalVolume"></span> m³（由管理员计算）</p>
                    <p><strong>价格:</strong> <span id="modalPrice"></span> 元（由管理员计算）</p>
                    <p><strong>状态:</strong> <span id="modalStatus" class="badge"></span></p>
                    <p><strong>创建时间:</strong> <span id="modalCreatedAt"></span></p>
                    <p><strong>更新时间:</strong> <span id="modalUpdatedAt"></span></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>



    <!-- 模态框（取消订单确认） -->
    <div class="modal fade" id="cancelOrderConfirmModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">取消订单</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>您确定要取消订单 <strong id="cancelOrderNumber"></strong> 吗？此操作不可恢复！</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">返回</button>
                    <button type="button" class="btn btn-danger" id="confirmCancelBtn">确认取消</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 页面特定的 JavaScript -->
    <th:block layout:fragment="scripts">
        <!-- 模态框（修改订单） - 移动到这里确保渲染 -->
        <div class="modal fade" id="editUserOrderModal" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">修改订单信息</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <form id="editOrderForm">
                            <input type="hidden" id="editOrderId">
                            <div class="mb-3">
                                <label for="editOrderNumber" class="form-label">订单号</label>
                                <input type="text" class="form-control" id="editOrderNumber" readonly>
                            </div>
                            <div class="mb-3">
                                <label for="editSenderName" class="form-label">寄件人姓名</label>
                                <input type="text" class="form-control" id="editSenderName" required>
                            </div>
                            <div class="mb-3">
                                <label for="editSenderPhone" class="form-label">寄件人手机</label>
                                <input type="text" class="form-control" id="editSenderPhone" required>
                            </div>
                            <div class="mb-3">
                                <label for="editSenderAddress" class="form-label">寄件人地址</label>
                                <input type="text" class="form-control" id="editSenderAddress" required>
                            </div>
                            <div class="mb-3">
                                <label for="editReceiverName" class="form-label">收件人姓名</label>
                                <input type="text" class="form-control" id="editReceiverName" required>
                            </div>
                            <div class="mb-3">
                                <label for="editReceiverPhone" class="form-label">收件人手机</label>
                                <input type="text" class="form-control" id="editReceiverPhone" required>
                            </div>
                            <div class="mb-3">
                                <label for="editReceiverAddress" class="form-label">收件人地址</label>
                                <input type="text" class="form-control" id="editReceiverAddress" required>
                            </div>
                            <div class="mb-3">
                                <label for="editPackageType" class="form-label">包裹类型</label>
                                <input type="text" class="form-control" id="editPackageType" required>
                            </div>
                            <div class="mb-3">
                                <label for="editWeight" class="form-label">重量(kg)</label>
                                <input type="number" step="0.01" class="form-control" id="editWeight" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">体积(m³)</label>
                                <p class="form-control-plaintext text-muted" id="editVolumeDisplay">由管理员计算</p>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">价格(元)</label>
                                <p class="form-control-plaintext text-muted" id="editPriceDisplay">由管理员计算</p>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" id="saveEditBtn">保存修改</button>
                    </div>
                </div>
            </div>
        </div>
        
        <script th:src="@{/js/my_sent_parcels.js}"></script>
    </th:block>
</body>
</html> 